<template>
  <div id="pie">
    <div class="chart" ref="chartsRef"></div>
  </div>
</template>
<script setup lang='ts'>
import { computed, ref, defineProps, onMounted, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
const chartsRef = ref<HTMLDivElement | null>(null);
import * as echarts from 'echarts/core'; // 核心模块
import { FunnelChart } from 'echarts/charts'; // 导入漏斗图
import { getFunnelOptions } from './data';
// 按需注册这些模块
echarts.use([FunnelChart]);
const props = defineProps(['list'])
const { setOptions } = useECharts(chartsRef);
watch(() => props.list, (val) => {
  if (val.length > 0) {
    initCharts()
  }
}, { deep: true })

const initCharts = () => {
  console.log(props.list, '===>list')
  const data = props.list.map(el => {
    return {
      value: el.percent, name: el.text, itemStyle: { color: el.color },
      number: el.number
    }
  })
  const bgData = props.list.map(el => {
    return {
      value: el.percent, name: el.text, itemStyle: { color: el.bg }
    }
  })
  const option = getFunnelOptions(data, bgData)
  setOptions(option);
};




</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 40vh;
}
</style>